* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

html,
body {
    background: #1f1f1f;
}

.wrap {
    width: 100%;
    height: 800px;
    margin-top: 100px;
    background: #131c48;
}

.box {
    width: 1000px;
    margin: auto;
    padding-top: 100px;
}

.left {
    width: 200px;
    border-radius: 25px;
    overflow: hidden;
    float: left;
}

.left span {
    width: 100%;
    display: block;
    float: left;
    height: 90px;
    line-height: 90px;
    text-align: center;
    font-size: 36px;
    color: #fff;
    border-bottom: 1px solid #000;
    background: #5c5e67;
    transition: all .5s;
}

.left span.active {
    height: 120px;
    background: skyblue;
    line-height: 120px;
}

.right {
    width: 700px;
    float: right;
    height: 700px;
    transform: translate(0, -80px);
    border-radius: 25px;
    overflow: hidden;
    background: #090909;
}
.container {
    height: 4200px;
    width: 100%;
    margin-top: -1400px;
    transition: margin-top .5s;
}

.container img {
    width: 100%;
    height: 600px;
    margin: 50px 0;
    float: left;
}
